<template>
  <div class="comment">
    <div class="top">
      <img :src="item.user.avatar_url" alt="">
      <div class="name"> {{ item.user.nick_name }}</div>
      <van-rate :size="16" :value="item.score / 2" color="#ffd21e"
      void-color="#eee" void-icon="star"></van-rate>
    </div>
    <div class="content"> {{ item.content }}</div>
    <div class="time">{{ item.create_time }}</div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  padding: 10px 10px;
  .top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      display: block;
      width: 20px;
      height: 20px;
    }
    .name {
      margin: 0 8px;
      text-align: center;
    }
  }
  .content {
    padding: 10px 0;
    font-size: 14px;
    color: #444;
  }
  .time {
    color: #999;
    font-size: 12px;
  }
}
</style>
